<template>
  <div ref="lottieRef" class="g-animation" :style="{ width, height }" />
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { animationMap, assetsPath, defaultRender } from './config'

defineOptions({ name: 'Animation' })
import lottie from "lottie-web";

const props = withDefaults(
  defineProps<{
    name?: string // 动画名称，在./config.js中配置
    loop?: boolean
    autoplay?: boolean
    renderer?: string
    width?: string // 需为有效的样式长度值，如 '100px'
    height?: string // 通width
  }>(),
  {
    loop: true,
    autoplay: true,
  },
)

const lottieRef = ref()
onMounted(() => {
  const config = props.name ? animationMap[props.name] : undefined

  if (config && process.client) {
    lottie.loadAnimation({
      container: lottieRef.value,
      animationData: config.data,
      assetsPath,
      renderer: props.renderer || defaultRender,
      loop: props.loop,
      autoplay: props.autoplay,
      width: props.width,
      height: props.height,
    })
  }
  else {
    console.error(`Animation named ${props.name} doesnot exist`)
  }
})
</script>
